<!--  -->
<script lang="ts" setup>
import { CloseOutlined, SettingOutlined } from "@vicons/antd";
import CheckboxLayout from "~/layouts/setting-drawer/checkbox-layout.vue";
import Container from "~/layouts/setting-drawer/container.vue";
import type { LayoutType } from "~/config/layout-theme.ts";
import type { ThemeType } from "~/config/theme.ts";
import CheckboxTheme from "~/layouts/setting-drawer/checkbox-theme.vue";

const props = withDefaults(
  defineProps<{
    floatTop?: number | string;
    drawerWidth?: number | string;
    layout?: "mix" | "side" | "top";
    layoutList?: LayoutType[];
    layoutStyleList?: LayoutType[];
    layoutStyle?: "light" | "inverted" | "dark";
    themeList?: ThemeType[];
    theme?: string;
  }>(),
  {
    floatTop: 240,
    drawerWidth: 300,
  },
);

const emit = defineEmits([
  "update:layout",
  "update:layoutStyle",
  "update:theme",
]);

const onChange = (val: string) => {
  emit("update:layout", val);
};

const onChangeStyle = (val: string) => {
  emit("update:layoutStyle", val);
};

const onChangeTheme = (item: ThemeType) => {
  emit("update:theme", item.key);
};

const show = ref(false);

const onShow = () => {
  show.value = true;
};

const onHide = () => {
  show.value = false;
};
</script>

<template>
  <teleport to="body">
    <div class="fixed top-240px right-0 z-10">
      <n-button
        class="b-rd-tr-0! b-rd-br-0!"
        size="large"
        type="primary"
        @click="onShow"
      >
        <template #icon>
          <n-icon size="24">
            <SettingOutlined />
          </n-icon>
        </template>
      </n-button>
    </div>
  </teleport>

  <n-drawer v-model:show="show" width="300">
    <n-drawer-content>
      <div class="flex flex-col my-16px">
        <Container
          v-if="layoutStyleList"
          :title="$t('global.layout.setting.drawer.style')"
        >
          <n-space size="large">
            <template v-for="item in layoutStyleList" :key="item.id">
              <CheckboxLayout
                :checked="item.id === layoutStyle"
                :dark="item.dark"
                :inverted="item.inverted"
                :layout="item.key"
                :title="$t(item.title)"
                @click="onChangeStyle(item.id)"
              />
            </template>
          </n-space>
        </Container>

        <Container
          v-if="layoutList"
          :title="$t('global.layout.setting.drawer.layout')"
        >
          <n-space size="large">
            <template v-for="item in layoutList" :key="item.key">
              <CheckboxLayout
                :checked="item.key === layout"
                :layout="item.key"
                :title="$t(item.title)"
                @click="onChange(item.key)"
              />
            </template>
          </n-space>
        </Container>

        <Container
          v-if="themeList"
          :title="$t('global.layout.setting.drawer.theme')"
        >
          <n-space size="large">
            <CheckboxTheme
              v-for="item in themeList"
              :key="item.key"
              :checked="item.key === theme"
              :color="item.color"
              :title="$t(item.title)"
              @click="onChangeTheme(item)"
            />
          </n-space>
        </Container>
      </div>
    </n-drawer-content>
    <div class="absolute top-240px right-300px">
      <!---->
      <n-button
        class="b-rd-tr-0! b-rd-br-0!"
        size="large"
        type="primary"
        @click="onHide"
      >
        <template #icon>
          <n-icon size="24">
            <CloseOutlined />
          </n-icon>
        </template>
      </n-button>
    </div>
  </n-drawer>
</template>

<style scoped></style>
